<template>
<div class="login_container"><!--到时候别忘了把这里的样式清掉-->
	<el-row>
		<el-col :span="12" :xs="0"></el-col>
		<el-col :span="12" :xs="24">

			<el-form ref="form" :rules="rules" :model="formInline" class="login_form">
				<h1>{{ hello }}</h1>
				<h2>欢迎登录兆博仓库系统</h2>
				<!--账号-->
				<el-form-item prop="username">
					<template #label>
						<span style="color: white; font-weight: bold">账号</span>
					</template>
					<el-input v-model="formInline.username" :prefix-icon="User"/>
				</el-form-item>

				<!--登录密码-->
				<el-form-item prop="password">
					<template #label>
						<span style="color: white; font-weight: bold">密码</span>
					</template>
					<el-input v-model="formInline.password" :prefix-icon="Lock"/>
				</el-form-item>

				<!--长期有效-->
				<el-checkbox v-model="formInline.sessionSave" style="color: white">长期有效</el-checkbox>

				<!--登录按钮-->
				<el-form-item>
					<el-button type="primary" @click="onSubmit">登录</el-button>
				</el-form-item>

			</el-form>
		</el-col>
	</el-row>
</div>
</template>

<script lang="ts">
export default {
	name: "Login"
}
</script>
<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import {FormRules} from "element-plus";
import {reqAuthentication} from "@/api/manage/personnelManagement/index.ts";
import {AuthenticationResponse} from "@/api/manage/personnelManagement/type.ts";
import {useStore} from '@/pinia'

const hello = ref('晚上好')

onMounted(()=>{
		let hour
		const myDate = new Date();
		hour = myDate.getHours()
		if( hour > 5 && hour <= 10 ){
			hello.value = '早上好'
		}else if(hour > 10 && hour <= 13){
			hello.value = '中午好'
		}else if(hour > 13 && hour <= 18){
			hello.value = '下午好'
		}else if(hour > 18 && hour <= 23){
			hello.value = '晚上好'
		}
})

const router = useRouter()

const store = useStore()

const formInline = reactive({
	username: '',
	password: '',
	sessionSave: false,
})
const form = ref()

// 表单验证
const rules = reactive<FormRules>({
	username: [{
		required: true,
		message: '必填项',
		type: 'string',
	}],
	password: [{
		required: true,
		message: '必填项',
		type: 'string',
	}],
})




const onSubmit = async () => {
	await form.value.validate()
	reqAuthentication({
		username: formInline.username,
		password: formInline.password,
	}).then((result: AuthenticationResponse)=>{
		let token = result.data.token
		let permissions = result.data.identity
		// 将token存入localStorage中
		if (formInline.sessionSave) {
			localStorage.setItem('token', token)
		} else {
			sessionStorage.setItem('token', token)
		}

		store.username = formInline.username
		store.user_id = result.data.user_id
    // 存储用户有权访问的组件的名称
		store.permissions = permissions
		// 跳转主页
		router.push({name: 'index'})
	})

}
</script>

<style scoped>
.login_container{
	width: 100%;
	height: 100vh;
	background: url('@/assets/images/background.jpg') no-repeat;
	background-size: cover;
}

.login_form{
	position: relative;
	width: 80%;
	top:30vh;
	background-size: cover;
	padding: 40px;
	h1{
		color: white;
		font-size: 40px;
	}
	h2{
		color: white;
		font-size: 20px;
		margin: 20px 0;
	}
}
</style>